<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他的结构伪类选择器</title>

    <style type="text/css">
        /*E:first-child 对一个父元素的第一个子元素E设置样式*/
        /*li:first-child{*/
        /*    background-color: tomato;*/
        /*}*/

        /*E:last-child 对一个父元素的最后一个子元素E设置样式*/
        /*li:last-child{*/
        /*    background-color: tomato;*/
        /*}*/

        /*E:nth-child(n) 对指定需要的子元素E设置样式*/
        /*li:nth-child(8){*/
        /*    background-color: tomato;*/
        /*}*/

        /*E:nth-last-child(n) 对指定需要的子元素E设置样式  倒序 */
        /*li:nth-last-child(3){*/
        /*    background-color: tomato;*/
        /*}*/

        /*E:nth-of-type(n) 与 :nth-child()作用类似 仅匹配同种标签 */
        /*li:nth-of-type(5){*/
        /*    background-color: tomato;*/
        /*}*/

        /*E:nth-last-of-type(n) 与 :nth-last-child()作用类似 仅匹配同种标签 */
        /*li:nth-last-of-type(5){*/
        /*    background-color: tomato;*/
        /*}*/

        /*E:nth-child(an+b) 循环设置样式 其中a和b为变量*/
        /*li:nth-child(2n+1){*/
        /*    background-color: tomato;*/
        /*}*/

        /*li:nth-of-type(2n-1){*/
        /*    background-color: blue;*/
        /*}*/


        /*E:only-child 匹配页面中父元素下仅有一个元素，并且该子元素为E元素*/
        /*p:only-child{*/
        /*    background-color: tomato;*/
        /*}*/

        /*E:only-of-type 匹配父元素中使用同种标签的唯一一个子元素E*/
        p:only-of-type{
            background-color: tomato;
        }
    </style>

</head>
<body>
    <ol>
        <li>风筝大剑五只鸟->寒冰</li>
        <li>卖萌蘑菇快点跑->提莫</li>
        <li>国王三刀真五秒->蛮王</li>
        <li>我还是有序列表项一</li>
        <p>我是列表标签里面放的其它标签</p>
        <li>我还是有序列表项二</li>
        <li>我还是有序列表项三</li>
        <li>我还是有序列表项四</li>
        <li>我还是有序列表项五</li>
        <li>我还是有序列表项六</li>
    </ol>

    <div>
        <p>我是div中的p</p>
    </div>

    <div>
        <p>我是第二个div中的第一个P</p>
        <b>我是第二个div中的第一个B</b>
    </div>

    <div>
        <p>我是第三个div中的第一个P</p>
        <p>我是第三个div中的第二个P</p>
    </div>

</body>
</html>